<template>
  <div style="height: 100%; position: relative">
    <n-layout position="absolute">
      <Header @goPath="goPath"></Header>
      <Content>
        <RouterView v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is='Component' v-if='!$route.meta.keepAlive' :key='$route.name' />
        </RouterView>
      </Content>
      <!-- <Footer></Footer> -->
    </n-layout>
    <!-- <RouterView></RouterView> -->
  </div>
</template>

<script  setup lang="ts">
import { onMounted } from "vue"
import Header from "./Layout/components/Header.vue";
import Content from "./Layout/components/Content.vue";
import Footer from "./Layout/components/Footer.vue";
import { VaeStore } from './store'
import { useRouter } from 'vue-router'
const store = VaeStore();

// 生命周期
onMounted(() => {
  getWindowResize()
  window.addEventListener('resize', getWindowResize)
})
// 获取屏幕尺寸
const getWindowResize = function () {
  store.setclientWidth(window.innerWidth);
  store.setclientHeight(window.innerHeight);

}
//
const $r = useRouter();
//跳转页面
const goPath = (key: string) => {
  $r.push({ name: key })
}

</script>

<style lang="less" scoped></style>
